<template>
  <div class="home-wrapper">
    <el-row class="pl20 pr20 pb20 pt20" style="padding: 15px;">
      <!-- 常用应用部分 -->
      <div class="collection block">
        <div class="body">
          <div class="header">
            <title-label>常用应用</title-label>
          </div>
          <ul id="collectionList" class="list">
            <router-link v-for="(item, index) in favoritesMenuList" :key="item.menuId" :to="item.path">
              <li :data-id="item.menuId" :title="item.menuName" class="item">
                <div class="content">
                  <span class="img" :style="{ backgroundColor: colorList[index%7] }">{{ item.menuName.slice(0, 1) }}</span>
                  <span class="name">{{ item.menuName }}</span>
                </div>
                <div class="el-tooltip icon" tabindex="0">
                  <i aria-hidden="true" class="iconfont icon-collection"></i>
                </div>
              </li>
            </router-link>

          </ul>
        </div>
      </div>

      <!-- 数据看板部分 -->
      <div class="section block">
        <h2 class="section-title"><title-label>数据看板</title-label></h2>
        <div class="vue-grid-layout">
          <index-databoard-card :value="dataBoardData[card.code]" v-for="(card, index) in cards" :name="card.name" :index="index"></index-databoard-card>
        </div>
      </div>
      <ChartCardRow></ChartCardRow>

    </el-row>
  </div>
</template>
<script setup>


import IndexDataboardCard from "./IndexDataboardCard.vue";
import ChartCardRow from "./chartCard/index.vue"
import usePortalStore from '@/store/modules/portal.js';
import TitleLabel from "@/components/TitleLabel.vue";
import api from "./api.js";

const store = usePortalStore();

// 颜色列表，为了让不同的块显示不同的颜色
const colorList = [
  'rgb(204, 204, 102)', 'rgb(202, 102, 204)', 'rgb(102, 204, 173)',
  'rgb(204, 143, 102)', 'rgb(112, 102, 204)', 'rgb(121, 204, 102)',
  'rgb(204, 102, 151)'
];



const dataBoardData = ref({});

// 常用应用
const favoritesMenuList = computed(()=> {
  return store.getFavoritesMenuList();
});

// 我配置的看板列表
const myBoardList = ref([]);

const cards = computed(()=> {

  if (myBoardList.value && myBoardList.value.length > 0) {
    return myBoardList.value.filter((item)=> {
      return item.boardType === 1;
    });
  }
})

/**
 * 获取首页的配置
 */
async function getPortalSetting() {
  const response = await api.getSetting();
  myBoardList.value = response.dataBoardList;
  store.setData(response);
}

/**
 * 获取数据面板的数据
 */
async function getDataBoardData() {
  const response = await api.getDataboardData();
  dataBoardData.value = response.data;

}

const timeRangeData = reactive({
  year: [1000, 2000, 1500, 3000, 2500, 1800],
  threeMonths: [2000, 1500, 3000],
  halfYear: [1500, 2000, 2500, 3000, 3500, 4000]
});
const currentDataType = ref('initial');

onMounted(()=> {
  getPortalSetting();
  getDataBoardData();
})

</script>

<style scoped lang="scss">

.home-wrapper {
  overflow: auto;

  .block {
    background: white;
    width: 100%;
    padding: 10px 10px;
    border: 1px solid rgb(230, 232, 235);
    border-radius: 5px;
    margin-bottom: 10px;
  }

}

#collectionList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: Arial, sans-serif;
}

h4 {
  margin-right: 20px;
}

.item:hover {
  background-color: #f0f0f0;
}

.icon {
  cursor: pointer;
}

.icon i {
  color: #888;
  transition: color 0.3s;
}

.icon:hover i {
  color: #333;
}

.section {
  width: 100%;
  margin-bottom: 20px;
}

.section-title {
  color: #0b1019;
  font-size: 15px;
}

.vue-grid-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.quantity-button {
  width: 80px;
  margin-left: 20px;
  background-color: blue;
  color: #fff;
  border: 1px solid #000;
}

.collection {
  .body {
    .list {
      .item {
        width: 130px;
        height: 40px;
        background-color: #f4f4f4;
        border-radius: 6px;
        box-sizing: border-box;
        padding: 0 30px 0 8px;
        margin: 8px 0 0;
        cursor: pointer;
        position: relative;
        .content {
          width: 100%;
          height: 40px;
          display: flex;
          align-items: center;
          .img {
            width: 22px;
            height: 22px;
            line-height: 22px;
            font-size: 13px;
            text-align: center;
            color: #fff;
            border-radius: 4px;
            display: inline-block;
            flex-shrink: 0;
          }
          .name {
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            display: inline-block;
            margin-left: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .icon {
          color: #ffb92e;
          display: none;
          position: absolute;
          top: 13px;
          right: 8px;
        }
      }
    }
  }
}
</style>